<template>
	<view class="personal">
		<view class="header">
			<!-- 登录状态 -->
			<template v-if="isLoggedIn">
				<image class="img" :src="userinfo.avatarUrl" mode=""></image>
				<text>{{userinfo.nickName}}</text>
				<button class="exit" @click="exit">退出登录</button>
			</template>
			<!-- 未登录状态 -->
			<template v-else>
				<image class="img" src='/static/img/personal/personal.png' mode=""></image>
				<text @click="toLogin">去登录</text>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				isLoggedIn:false
			};
		},
		mounted(){
			// 从本地存储器里读取数据
			wx.getStorage({
				key: 'userinfo',
				success: (res) => {  // 使用箭头函数
					this.userinfo = JSON.parse(res.data)
					this.isLoggedIn = true
				}
			})
		},
		methods:{
			toLogin(){
				// 关闭所有页面，打开到应用内的某个页面
				wx.reLaunch({
					url:'/pages/login/login'
				})
			},
			exit(){
				// 同步删除
				try {
				  wx.removeStorageSync('userinfo');
				  console.log('删除成功');
				  // 更新页面状态
				  this.userinfo = {};
				  this.isLoggedIn = false;
				} catch (e) {
				  console.error('删除失败:', e);
				}
			}
		}
	}
</script>

<style lang="stylus">
.personal
	.header
		height: 300rpx
		background-color: #EED7B5
		line-height: 200rpx
		display: flex
		.img
			width: 100rpx
			height: 100rpx
			vertical-align: middle
			margin: 50rpx
		.exit
			height: 80rpx
			text-align: center
			margin-top: 10% 
			
</style>
